<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>GT pro钱包</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
		<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/card.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
	</head>

	<body class="hold-transition skin-blue sidebar-mini">
		<div class="wrapper">
			<div class="content-wrapper">
				<section class="content-header">
					<ol class="breadcrumb">
						<li>
							<a href="#"><i class="fa fa-dashboard"></i>游戏用户</a>
						</li>
						<li class="active">平台黑名单</li>
					</ol>
				</section>
				<section class="content">
					<div class="box">
						<div class="box-header with-border">
							平台黑名单列表
						</div>
						<div class="box-body">
							<div class="buyu_search_group">
								<div class="row">
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<div class="input-group margin">
											<div class="input-group-btn">
												<button type="button" class="btn btn-default" aria-expanded="false">类型</button>
											</div>
											<select type="text" class="form-control" id="type">
												<option value="">全部黑名单类型</option>
												<option value="1">用户</option>
												<option value="2">设备</option>
												<option value="3">IP</option>
											</select>
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-lg-3 typeNext">
										<div class="input-group margin">
											<div class="input-group-btn">
												<button type="button" class="btn btn-default" aria-expanded="false">详情 </button>
											</div>
											<input type="text" class="form-control" id="details">
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<button type="button" class="btn bg-primary margin" onclick="search()"><i class="fa fa-search" ></i>&nbsp;搜索</button>
										<button type="button" class="btn bg-primary margin" onclick="reset()"><i class="fa fa-trash" ></i>&nbsp;重置</button>
									</div>
									<div class="col-xs-12">
										<button type="button" class="btn bg-primary margin" onclick="add()"><i class="fa fa-plus" ></i>&nbsp;新增</button>

									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<!-- /.box-header -->
								<div class="box-body">
									<table id="example" class="display nowrap table table-bordered table-striped" style="width:100%;">
										<thead>
											<tr>
												<td>ID</td>
												<td>黑名单类型</td>
												<th>详情</th>
												<th>备注</th>
												<th>结束时间</th>
												<th>添加时间</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody></tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="modal fade parents in" id="outUserModal">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">	                  				<span aria-hidden="true">×</span>								</button>
									<h4 class="modal-title">移出黑名单</h4> </div>
								<div class="modal-body">
									<form class="form-horizontal">
										<div class="box-body"> 
										 	<input type="hidden" name="type" value="">
											<input type="hidden" name="details">
											<p>是否移出黑名单“<span name="name"></span>”</p>
											<label class="margin-bottom-none col-xs-12" style="padding-left: 0;">操作密码
												<input type="password" class="form-control"  name="op_password">
											</label>
										</div>
										
									</form>
								</div>
								<div class="modal-footer"> <button type="button" class="btn btn-primary save" onclick="deleteSave()">确定</button> </div>
							</div>
						</div>
					</div>

					<div class="modal fade parents in" id="addModal">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">	        
									<span aria-hidden="true">×</span>			</button>
									<h4 class="modal-title">新增黑名单</h4> </div>
								<div class="modal-body">
									<div class="row">
										<label class="margin-bottom-none col-xs-12">类型
											<select type="text" class="form-control" name="type">
												<option value="1">用户</option>
												<option value="2">设备</option>
												<option value="3">ip</option>
											</select>
										</label>
										<label class="margin-bottom-none col-xs-12">失效时间
											<input type="text" class="form-control" id="end_time" name="end_time">
										</label>
										
										<label class="margin-bottom-none col-xs-12">详情<span class="text-red" id="changeHint">（请输入用户id）</span>
											<textarea type="text" class="form-control" name="details"placeholder=""></textarea>
										</label>
										<label class="margin-bottom-none col-xs-12">备注说明
											<textarea type="text" class="form-control" name="remark"></textarea>
										</label>
										<label class="margin-bottom-none col-xs-12"><span class="text-red">操作密码</span>
											<input type="password" class="form-control" name="op_password">
										</label>
									</div>
								</div>
								<div class="modal-footer"><button type="button" class="btn btn-primary save" onclick="addSave()">确定</button></div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
		<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

		<script src="dist/js/adminlte.min.js"></script>
		<script src="js/argument.js"></script>
		<script src="js/fun.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/pop.js"></script>
		<script src="js/getList.js"></script>
		<!--<script src="js/hsjManagement_fun.js"></script>-->

		<script type="text/javascript">
			$('#end_time').datepicker({
				autoclose: true,
				format: 'yyyy-mm-dd',
			})

			$(".typeNext").eq($("#type").val()).show().siblings(".typeNext").hide();
			$("#type").change(function() {
				$(".typeNext").eq($("#type").val()).show().siblings(".typeNext").hide();
			})
			var table = $('#example').DataTable({
				'ordering': false,
				'lengthChange': false,
				'searching': false,
				'info': true,
				"processing": true,
				"serverSide": true,
				'scrollX':true,
				"ajax": {
					"type": 'post',
					"url": url + "Back_BlackList",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					"data": function(d) {
						var dataType ={
							type:{type:'string',value:$("#type").val()},
							details:{type:'string',value:$("#details").val()},
						}
						var Json = renderData(dataType);
						Json.page_num = d.start / 10 + 1;
						var data={};
						data.data = JSON.stringify(Json);
						return data;
					},
					"dataFilter": function(data) {
						var datajson = eval('(' + data + ')');
						if(datajson.status == 1000||datajson.status == 102) {
							ToLogin(datajson)
							return false;
						} else if(datajson.status != 1) {
							alert(datajson.error);
							return false;
						}
						var json = {};
						if(datajson.data==null){
							json.recordsTotal = 0;
							json.recordsFiltered = 0;
							json.data = [];
							return JSON.stringify(json);
						}else{
							json.recordsTotal = datajson.data.total;
							json.recordsFiltered = datajson.data.total;
							json.data = datajson.data.data_list;
							return JSON.stringify(json);
						}
					}
				},
				"columns": [{
						data: "id",
					},
					{
						data: null,
						render: function(data) {
							var blackType = ["用户", "设备", "ip"]
							return blackType[data.type - 1]
						}
					},
//					{
//						data: null,
//						render: function(data) {
//							var arr = ["UserId", "deviceUuid", "ip"];
//							console.log(data.Type)
//							return data[arr[data.Type - 1]]
//						}
//					},
					{
						data: null,
						render: function(data) {

							if(data.type == 1) {
								return data.details
							} else if(data.type == 2) {
								return data.details
							} else {
								return data.details
							}

						}
					},
					{
						data: 'remark'
					},
					
					{
						data: 'end_time'
					},
					{
						data: 'add_time'
					},
					{
						data: null,
						render: function(data) {
							return '<button type="button" class="btn  btn-danger" onclick="out(this)" userId="'+ data.id +'" details="'+ data.details +'" userType="' + data.type + '">&nbsp;移出黑名单</button>'
						}
					},
					
				]
			})
		</script>
		<script type="text/javascript">
			function add() {
				$("#addModal input").val("");
				$("#addModal textarea").val("");
				$("#addModal").modal("show")
			}
			function addSave(){
				if($("#addModal [name=detail]").val()==""){
					alert("详情不能为空")
					return false;
				}
				if($("#addModal [name=op_password]").val()==""){
					alert("操作密码不能为空")
					return false;
				}
				$.ajax({
					type: 'post',
					url: url + "Back_BlackAdd",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					data: {
						data:JSON.stringify({
							type:$("#addModal [name=type]").val(),
							end_time:$("#addModal [name=end_time]").val() +" 00:00:00",
							details:$("#addModal [name=details]").val(),
							remark:$("#addModal [name=remark]").val(),
							op_password:$("#addModal [name=op_password]").val(),
						})
					},
					success: function(res) {
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
							return false;
						} else if(res.status != 1) {
							alert(res.error);
							return false;
						}
						$("#addModal").modal("hide");
						alert(res.error);
						table.draw(false);
					}
				})
			}
			
			$("#addModal [name=type]").change(function(){
				var textJson ={
					1:"（请输入用户id）",
					2:"（请输入设备id）",
					3:"（请输入ip地址）",
				}
				$("#changeHint").text(textJson[$(this).val()])
			})
			// 删除
			function deleteSave() {
				$.ajax({
					type: "post",
					url: url + "Back_BlackDel",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					data:{
						data:JSON.stringify({
							op_password:$("#outUserModal [name=op_password]").val(),
							type:$("#outUserModal [name=type]").val(),
							details:$("#outUserModal [name=details]").val(),
						})
					},
					dataType: "json",
					success: function(res) {
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
							return false;
						} else if(res.status != 1) {
							alert(res.error);
							return false;
						}
						$("#outUserModal").modal("hide");
						alert(res.error);
						table.draw(false);
					}
				})
			}

			function out(_this) {
				console.log($(_this).attr("userid"))
				$("#outUserModal").modal("show");
				$("#outUserModal [name=type]").val($(_this).attr("userType"));				
				$("#outUserModal [name=details]").val($(_this).attr("details"));
				$("#outUserModal [name=name]").text($(_this).attr("userid"));
				$("#outUserModal [name=opPw]").val('');
				$("#outUserModal [name=opPw]").val('');
			}
		</script>
	</body>

</html>